<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
    <h1>你最喜欢哪个运动员?</h1>
    <input type="checkbox" @change="fullCheck()" v-model="all">全选<br>
    <span v-for="item in list"><input type="checkbox" @change="checkClick()" v-model="item.check">
        {{ item.name }}</span><br>
    新增其他:<input type="text" v-model="newName"><br>
    选择文件:<input type="file" @change="load($event)"><br>
    <button @click="add()">上传</button><br>
    <button @click="selectAll">全选</button>
    <button @click="deselectAll">全不选</button>
    <button @click="invertSelection">反选</button><br>
    <span v-for="item in imgs">
        <img :src="item" alt="" style="width: 200px;height: 300px;">
    </span>
    </div>
</body>
</html>

<script>
    const connApp = Vue.createApp({
        data() {
            return {
                list:[{name:'zjk',src:'./e739850e0034904b9108660473d0eb31.jpeg',check:false},
                      {name:'fzd',src:'./adbe298bb4d7dd602ebeafd607a47b32.jpg',check:false},
                      {name:'ml',src:'./132291f528c814ba821d88577da8939a.jpeg',check:false},
                      {name:'fb',src:'./49960a3b64c557c315006e57f6239a13.jpeg',check:false}
                ],
                imgs:[],
                all:false,
                fileSrc:''
            }
        },
        methods: {
            showImages(){
                 this.imgs=[]
                this.list.map(v =>{
                    if(v.check){
                        this.imgs.push(v.src)
                    }
                })
            },
            checkClick(){
                let flag = this.list.length
                this.list.map(v=>{
                    if(v.check==false) flag--
                })
                if(flag==this.list.length){
                    this.all=true
                }else{
                    this.all=false
                }
                this.showImages()
            },
            fullCheck(){
                if(this.all){
                    this.list.map(v=>{v.check=true})
                }else{
                    this.list.map(v=>{v.check=false})
                }
                 this.imgs=[]
                this.list.map(v =>{
                    if(v.check){
                        this.imgs.push(v.src)
                    }
                })
            },
          
            selectAll() {
                this.list.map(v => {v.check = true})
                this.all = true
                this.showImages()
            },
          
            deselectAll() {
                this.list.map(v => {v.check = false})
                this.all = false
                this.showImages()
            },
        
            invertSelection() {
                this.list.map(v => {v.check = !v.check})
   
                const allChecked = this.list.every(v => v.check)
                this.all = allChecked
                this.showImages()
            },
            load(e){
                let file = e.target.files
                let img = new FileReader()
                img.readAsDataURL(file[0])
                img.onload = ({target})=>{
                    alert("上传成功")
                    this.fileSrc=target.result
                }
            },
            add(){
                if(this.newName!=''){
                    this.list.push({
                        name:this.newName,
                        src:this.fileSrc,
                        check:false
                    })
                }else{
                    alert("请输入你要添加的城市的名称")
                }
            }
        }
    }).mount("#app")
</script>
